<template>
	<view>
		<mescroll-uni :down="downOption" @down="downCallback" @up="upCallback">	
		<view class="tui-mybg-box">
			<image src="/static/images/my/img_bg_3x.png" class="tui-my-bg" mode="widthFix"></image>
			<view class="tui-header-center">
				<image :src="my_info.status==1&&my_info.image_url?my_info.image_url:image_url" class="tui-avatar"></image>
				<view class="tui-info">
					<view class="tui-explain" v-if="my_info.status==1">{{my_info.nick_name?my_info.nick_name:'未设置'}}</view>
					<view v-else>
						<!-- #ifdef MP-WEIXIN -->
						<button hover-class="none" open-type="getUserInfo" withCredentials="true" lang="zh_CN" @getuserinfo="wx_login" class="login">登录</button>
						<!-- #endif -->
						<!-- #ifdef APP-PLUS -->
						<button hover-class="none" @tap="wx_login" class="login">登录</button>
						<!-- #endif -->
						<!-- #ifdef H5 -->
						<button hover-class="none" @tap="wx_login" class="login">登录</button>
						<!-- #endif -->
					</view>
				</view>
			</view>
		</view>
		<view class="tui-content-box">
			<view class="tui-box tui-order-box">
				<tui-list-cell :arrow="true" padding="0" :lineLeft="false">
					<view class="tui-cell-header">
						<view class="tui-cell-title">我的订单</view>
						<view class="tui-cell-sub"  @tap="order" data-index="0">查看全部订单</view>
					</view>
				</tui-list-cell>
				<view class="tui-order-list">
					<view class="tui-order-item" @tap="order" data-index="1" >
						<view class="tui-icon-box">
							<image src="/static/images/my/icon_daifukuan_3x.png" class="tui-order-icon"></image>
							<view class="tui-badge tui-badge-red" v-if="my_info.order_status1>0">{{my_info.order_status1>99?99:my_info.order_status1}}</view>
						</view>
						<view class="tui-order-text">待付款</view>
					</view>
					<view class="tui-order-item"@tap="order" data-index="2">
						<view class="tui-icon-box">
							<image src="/static/images/my/icon_daifahuo_3x.png" class="tui-order-icon"></image>
							<view class="tui-badge tui-badge-red" v-if="my_info.order_status2>0">{{my_info.order_status2>99?99:my_info.order_status2}}</view>
						</view>
						<view class="tui-order-text">待发货</view>
					</view>
					<view class="tui-order-item" @tap="order" data-index="3">
						<view class="tui-icon-box">
							<image src="/static/images/my/icon_daishouhuo_3x.png" class="tui-order-icon"></image>
							<view class="tui-badge tui-badge-red" v-if="my_info.order_status3>0">{{my_info.order_status3>99?99:my_info.order_status3}}</view>
						</view>
						<view class="tui-order-text">待收货</view>
					</view>
					<view class="tui-order-item" @tap="order" data-index="4">
						<view class="tui-icon-box">
							<image src="/static/images/my/icon_pingjia_3x.png" class="tui-order-icon"></image>
							<view class="tui-badge tui-badge-red" v-if="my_info.order_status4>0">{{my_info.order_status4>99?99:my_info.order_status4}}</view>
						</view>
						<view class="tui-order-text">评价</view>
					</view>
					<view class="tui-order-item" @tap="order" data-index="5">
						<view class="tui-icon-box">
							<image src="/static/images/my/icon_tuikuan_3x.png" class="tui-order-icon"></image>
							<view class="tui-badge tui-badge-red" v-if="my_info.order_status5>0">{{my_info.order_status5>99?99:my_info.order_status5}}</view>
						</view>
						<view class="tui-order-text">退款/售后</view>
					</view>
				</view>
			</view>
			<view class="tui-box tui-tool-box">
				<tui-list-cell  padding="0" :lineLeft="false">
					<view class="tui-cell-header">
						<view class="tui-cell-title">常用工具</view>
					</view>
				</tui-list-cell>
				<view class="tui-order-list tui-flex-wrap">
					<view class="tui-tool-item">
						<view class="tui-icon-box">
							<image src="/static/images/my/icon_gift_3x.png" class="tui-tool-icon"></image>
						</view>
						<view class="tui-tool-text">签到送好礼</view>
					</view>
					<view class="tui-tool-item">
						<view class="tui-icon-box">
							<image src="/static/images/my/icon_jifen.png" class="tui-tool-icon"></image>
						</view>
						<view class="tui-tool-text">积分管理</view>
					</view>
					
					<view class="tui-tool-item" @tap="my_collect">
						<view class="tui-icon-box">
							<image src="/static/images/my/icon_shoucang.png" class="tui-tool-icon"></image>
						</view>
						<view class="tui-tool-text">我的收藏</view> 
					</view>
					<view class="tui-tool-item" @tap="recharge_list">
						<view class="tui-icon-box">
							<image src="/static/images/my/icon_purse_3x.png" class="tui-tool-icon"></image>
						</view>
						<view class="tui-tool-text">钱包</view>
					</view>
					<view class=" tui-tool-item">
						<view class="tui-icon-box">
							<image src="/static/images/my/icon_ticket_3x.png" class="tui-tool-icon"></image>
						</view>
						<view class="tui-tool-text">优惠券</view>
					</view>
					<view class=" tui-tool-item">
						<view class="tui-icon-box">
							<image src="/static/images/my/icon_kefu_3x.png" class="tui-tool-icon"></image>
						</view>
						<view class="tui-tool-text">客服服务</view>
					</view>
					
					<view class="tui-tool-item" @tap="setting">
						<view class="tui-icon-box">
							<image src="/static/images/my/icon_shezhi.png" class="tui-tool-icon"></image>
						</view>
						<view class="tui-tool-text">设置</view>
					</view>
					<view class="tui-tool-item" @tap="site_list">
						<view class="tui-icon-box">
							<image src="/static/images/my/icon_dizhi.png" class="tui-tool-icon"></image>
						</view>
						<view class="tui-tool-text">地址管理</view>
					</view>
					<view class="tui-tool-item" @tap="config_content">
						<view class="tui-icon-box">
							<image src="/static/images/my/icon_guanyuwomen.png" class="tui-tool-icon"></image>
						</view>
						<view class="tui-tool-text">关于我们</view>
					</view>
					<view class="tui-tool-item" @tap="couple">
						<view class="tui-icon-box">
							<image src="/static/images/my/icon_yijianfankiu.png" class="tui-tool-icon"></image>
						</view>
						<view class="tui-tool-text">意见反馈</view>
					</view>
					<view class="tui-tool-item" @tap="reward">
						<view class="tui-icon-box">
							<image src="/static/images/my/icon_zaishang.png" class="tui-tool-icon"></image>
						</view>
						<view class="tui-tool-text">项目打赏</view>
					</view>
					
				</view>
			</view>

			<view class="tui-product-box">
				<view class="tui-group-name">
					<text>为你推荐</text>
				</view>
				<view class="tui-product-list">
					<view class="tui-product-container">
						<block v-for="(item,index) in product_list" :key="index" v-if="(index+1)%2!=0">
							<!--商品列表-->
							<view class="tui-pro-item" hover-class="hover" :hover-start-time="150" @tap="product_detail" :data-id="item.id">
								<image :src="item.image_url" class="tui-pro-img" mode="widthFix" />
								<view class="tui-pro-content">
									<view class="tui-pro-tit">{{item.name}}</view>
									<view>
										<view class="tui-pro-price">
											<text class="tui-sale-price">￥{{item.money}}</text>
											<text class="tui-factory-price">￥{{item.bazaar_money}}</text>
										</view>
										<view class="tui-pro-pay">{{item.sales}}人付款</view>
									</view>
								</view>
							</view>
							<!--商品列表-->
							
						</block>
					</view>
					<view class="tui-product-container">
						<block v-for="(item,index) in product_list" :key="index" v-if="(index+1)%2==0">
							<!--商品列表-->
							<view class="tui-pro-item" hover-class="hover" :hover-start-time="150" @tap="product_detail" :data-id="item.id">
								<image :src="item.image_url" class="tui-pro-img" mode="widthFix" />
								<view class="tui-pro-content">
									<view class="tui-pro-tit">{{item.name}}</view>
									<view>
										<view class="tui-pro-price">
											<text class="tui-sale-price">￥{{item.money}}</text>
											<text class="tui-factory-price">￥{{item.bazaar_money}}</text>
										</view>
										<view class="tui-pro-pay">{{item.sales}}人付款</view>
									</view>
								</view>
							</view>
							<!--商品列表-->
							
						</block>
					</view>
				</view>
			</view>
			
		</view>
		</mescroll-uni>	
	</view>
</template>

<script>
	import tuiListCell from "@/components/list-cell/list-cell"
	import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue";
	import My from './my-model.js'
	var my = new My();
	export default {
		components: {
			tuiListCell,
			MescrollUni
		},
		data() {
			return {
				downOption: {},
				total:0,
				//商品页码
				page:1,
				my_info:{},//用户信息
				image_url:'../../static/images/my/mine_def_touxiang_3x.png',//默认头像
				// #ifdef MP-WEIXIN
				provider:1,	
				//#endif
				// #ifdef H5
				provider:3,	
				//#endif
				// #ifdef APP-PLUS
				provider:4,	
				//#endif
				//商品列表
				product_list:[],
			}
		},
		onLoad: function(options) {
			var that = this;
			// #ifdef H5
			if(options.openid){
				var data = {
					gzh_open_id:options.openid,
					nick_name:options.nickname,
					gender:options.sex,
					avatar_url:options.headimgurl,
					type:2,
					provider:that.provider
				};
				my.login(data,(res)=>{
					if(res.code == 8888){
						my.set_storage('token',res.data.token);
						my.set_storage('token_type',res.data.token_type);
						that.my();
					}
				})
			}
			//#endif
		},
		onShow: function() {
			var that = this;
			that.my();
		},
		methods: {
			/*下拉刷新的回调 */
			downCallback(mescroll) {
				try{
					var that = this;
					that.page = 1;
					that.my();
				} catch (e) {
					mescroll.endErr();
				}
				mescroll.resetUpScroll();
			},
			/*上拉加载的回调: mescroll携带page的参数, 其中num:当前页 从1开始, size:每页数据条数,默认10 */
			upCallback(mescroll) {
					var that = this;
					that.product((res)=>{
						mescroll.endBySize(res.data.length, res.total);
					})
			},
			//商品列表
			product(callback){
				var that = this;
				my.product_list(that.page,(res)=>{
					if(res.code == 8888){
						if(res.data.current_page == 1){
							that.product_list = res.data.data;
							that.total = res.data.total;
						}else{
							for(var i=0;i<res.data.data.length;i++){
								that.product_list.push(res.data.data[i]);
							}
						}
					}
					if(callback){
						if(that.page < res.data.last_page){
							that.page = that.page + 1;
						}
						callback(res.data);
					}
				});
			},
			my(){
				var that = this;
				my.my((res)=>{
					if(res.code==8888){
						if(res.data.phone == ""){
							my.navigate_to('../login/login');
							return;
						}
						that.my_info = res.data;
						if(that.my_info.status_num>99){
							that.my_info.status_num = '99';
						}
						if(that.my_info.cart_count>99){
							that.my_info.cart_count = '99';
						}
						if(that.my_info.status_num>0){
							uni.setTabBarBadge({
							  index: 3,
							  text:that.my_info.status_num
							})
						}else{
							uni.removeTabBarBadge({
							  index: 3
							})
						}
						if(that.my_info.cart_count>0){
							uni.setTabBarBadge({
							  index: 2,
							  text:that.my_info.cart_count
							})
						}else{
							uni.removeTabBarBadge({
							  index: 2
							})
						}
					}
				})
			},
			wx_login(){
				var that = this;
				// #ifdef MP-WEIXIN
				uni.login({
					provider: 'weixin',
					success: function (loginRes) {
						var code = loginRes.code;
						uni.getUserInfo({
							provider: 'weixin',
							success: function(infoRes) {
								my.login({
									encryptData:infoRes.encryptedData,
									iv:infoRes.iv,
									code:code,
									type:2,
									provider:that.provider
								},(res)=>{
									if(res.code == 8888){
										my.set_storage('token',res.data.token);
										my.set_storage('token_type',res.data.token_type);
										that.my();
									}
								})
							}
						})
					}
				});
				//#endif
				// #ifdef APP-PLUS
				uni.login({
					provider: 'weixin',
					success: function (loginRes) {
						uni.getUserInfo({
							provider: 'weixin',
							success: function(infoRes) {
								var data = {
									gzh_open_id:infoRes.userInfo.openId,
									nick_name:infoRes.userInfo.nickName,
									gender:infoRes.userInfo.gender,
									avatar_url:infoRes.userInfo.avatarUrl,
									type:2,
									provider:that.provider
								};
								if(infoRes.userInfo.unionId){
									data.union_id=infoRes.userInfo.unionId;
								}
								my.login(data,(res)=>{
									if(res.code == 8888){
										my.set_storage('token',res.data.token);
										my.set_storage('token_type',res.data.token_type);
										that.my();
									}
								})
							}
						})
					}
				});	
				//#endif
				// #ifdef H5
				window.location.href = my.base_wx_login_url;
				//#endif
			},
			//跳转商品详情
			product_detail(e){ 
				var id = my.get_data_set(e,'id');
				my.navigate_to('../product_detail/product_detail?id='+id);
			},
			//我的收藏
			my_collect(){
				var that = this;
				if(that.my_info.status!=1){
					my.show_tips(that,{title:'请登录！'});return;
				}else{
					my.navigate_to('../my_collect/my_collect');
				};			
			},
			//地址管理
			site_list(){
				var that = this;
				if(that.my_info.status!=1){
					my.show_tips({title:'请登录！'});return;
				}else{
					my.navigate_to('../location/location');
				};	
			},
			//设置
			setting(){
				var that = this;
				if(that.my_info.status!=1){
					my.show_tips({title:'请登录！'});return;
				}else{
					my.navigate_to('../setting/setting');
				};	
			},
			//我的钱包
			recharge_list(){
				var that = this;
				if(that.my_info.status!=1){
					my.show_tips({title:'请登录！'});return;
				}else{
					my.navigate_to('../recharge_list/recharge_list');
				};	
			},
			//关于我们
			config_content(){
				my.navigate_to('../config_content/config_content');
			},
			//项目打赏
			reward(){
				my.navigate_to('../reward/reward');
			},
			//意见反馈
			couple(){
				my.navigate_to('../couple/couple');
			},
			//跳转订单管理
			order(e){
				var that = this;
				if(that.my_info.status!=1){
					my.show_tips({title:'请登录！'});return;
				}
				var index = my.get_data_set(e,'index');
				my.navigate_to('../order/order?index='+index);
			}
		}
	}
</script>

<style>
	@import url("my.css");
</style>
